<template>
	<div class="sign-page">
		<div class="contain">
			<div class="sign-form" :class="{ active: formType }">
				<div class="form-contain" v-show="formType">
					<div class="login-title">{{ loginTitle }}</div>

          <el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm" class="login-form"
                   @keyup.enter.native="submitLoginHandle">
            <!--
              1、普通登录（登录别名、手机号、邮箱号）
              2、账号申诉
            -->
            <el-form-item prop="loginID" v-show="loginMode === 0 || loginMode === 3">
              <el-input v-model="loginForm.loginID" size="medium" prefix-icon="el-icon-user" clearable maxlength="20"
                        placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password" v-show="loginMode === 0 || loginMode === 3">
              <el-input type="password" v-model="loginForm.password" size="medium" prefix-icon="el-icon-lock" show-password
                        clearable maxlength="20" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="code" v-show="loginMode === 0 || loginMode === 3">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="loginForm.code" size="medium" prefix-icon="el-icon-unlock" clearable maxlength="5"
                            placeholder="验证码"></el-input>
                </el-col>
                <el-col :span="11" :offset="1" style="height: 36px;">
                  <img :src="imageCaptcha.imageData" @click="getCaptcha(true)" alt="没有验证码" class="captcha">
                </el-col>
              </el-row>
            </el-form-item>
            <!--
              1、普通登录（登录别名、手机号、邮箱号）
              2、账号申诉
            -->
            <!-- 快捷登录（手机号、邮箱号） -->
            <el-form-item prop="fastId" v-show="loginMode === 1 || loginMode === 2">
              <el-input v-model="loginForm.fastId" size="medium" prefix-icon="el-icon-user" clearable maxlength="20"
                        placeholder="手机号/邮箱号"></el-input>
            </el-form-item>
            <el-form-item prop="fastCode" v-show="loginMode === 1 || loginMode === 2">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="loginForm.fastCode" size="medium" prefix-icon="el-icon-unlock" clearable maxlength="6"
                            placeholder="验证码"></el-input>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-button type="text" size="medium" :disabled="sendSecurityCodeBtnDisable" @click="sendLoginSecurityCodeHandle">{{ sendSecurityCodeBtnText }}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- 快捷登录（手机号、邮箱号） -->
            <!-- 忘记密码 -->
            <el-form-item prop="newPassword" v-show="loginMode === 2">
              <el-input type="password" v-model="loginForm.newPassword" size="medium" prefix-icon="el-icon-lock"
                        show-password clearable maxlength="20" placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item prop="checkNewPassword" v-show="loginMode === 2">
              <el-input type="password" v-model="loginForm.checkNewPassword" size="medium" prefix-icon="el-icon-lock"
                        show-password clearable maxlength="20" placeholder="确认新密码"></el-input>
            </el-form-item>
            <!-- 忘记密码 -->
          </el-form>
          <button :disabled="buttonLoad" class="login-button" @click="submitLoginHandle">{{ loginBtnTitle }}</button>

          <div class="login-tool">
            <span v-show="loginMode !== 0" @click="changeLoginModeHandle(0)">账号登录</span>
            <span v-show="loginMode !== 1" @click="changeLoginModeHandle(1)">免密登录</span>
            <span v-show="loginMode !== 2" @click="changeLoginModeHandle(2)">忘记密码</span>
            <span v-show="loginMode !== 3" @click="changeLoginModeHandle(3)">账号申诉</span>
          </div>
				</div>
				<div class="form-contain" v-show="!formType">
					<div class="register-title">注册用户</div>
          <el-form :model="registerForm" :rules="registerRules" status-icon ref="registerForm" class="register-form"
                   @keyup.enter.native="submitRegisterHandle">
            <el-form-item prop="username" v-show="registerStep === 0">
              <el-input v-model="registerForm.username" size="medium" prefix-icon="el-icon-user"
                        clearable maxlength="20" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="phone" v-show="registerStep === 0">
              <el-input v-model="registerForm.phone" size="medium" prefix-icon="el-icon-mobile-phone"
                        clearable maxlength="11" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="phoneCode" v-show="registerStep === 0">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="registerForm.phoneCode" size="medium" prefix-icon="el-icon-unlock" clearable maxlength="6"
                            placeholder="手机验证码"></el-input>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-button type="text" size="medium" :disabled="sendRegisterPhoneCodeBtnDisable"
                             @click="sendRegisterPhoneCodeHandle">{{ sendRegisterPhoneCodeBtnText }}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item prop="email" v-show="registerStep === 0">
              <el-input v-model="registerForm.email" size="medium" prefix-icon="el-icon-message"
                        clearable maxlength="20" placeholder="邮箱号"></el-input>
            </el-form-item>
            <el-form-item prop="emailCode" v-show="registerStep === 0">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="registerForm.emailCode" size="medium" prefix-icon="el-icon-unlock" clearable maxlength="6"
                            placeholder="邮件验证码"></el-input>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-button type="text" size="medium" :disabled="sendRegisterEmailCodeBtnDisable"
                             @click="sendRegisterEmailCodeHandle">{{ sendRegisterEmailCodeBtnText}}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item prop="password" v-show="registerStep === 1">
              <el-input type="password" v-model="registerForm.password" size="medium" prefix-icon="el-icon-lock"
                        show-password clearable maxlength="20" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword" v-show="registerStep === 1">
              <el-input type="password" v-model="registerForm.checkPassword" size="medium" prefix-icon="el-icon-lock"
                        show-password clearable maxlength="20" placeholder="确认密码"></el-input>
            </el-form-item>
          </el-form>
          <button v-show="registerStep === 0" class="register-button" @click="submitRegisterHandle">填写密码</button>
          <div v-show="registerStep === 1" class="btn-group">
            <button class="pre-button" @click="preRegisterStepHandle">填写信息</button>
            <button :disabled="buttonLoad" class="register-button next-btn" @click="submitRegisterHandle">注册</button>
          </div>
				</div>
			</div>
			<div class="small-box" :class="{ active: formType }">
				<div class="small-contain" v-show="formType">
					<div class="s-title">欢迎回来!</div>
					<p class="s-content">登录系统即可与其他用户一块丰富网站内容</p>
					<p class="s-content">您可以发表并管理自己的博客</p>
					<p class="s-content">您可以点赞并评论浏览的博客</p>
          <el-tooltip effect="light" content="如果您没有用户，点击按钮，开始用户注册" placement="top">
            <button class="s-button" @click="changeFormTypeHandle(false)">注册</button>
          </el-tooltip>
          <el-tooltip effect="light" content="点击按钮，上一个页面" placement="bottom">
            <button class="s-button" @click="returnPrePageHandle">返回</button>
          </el-tooltip>
				</div>
				<div class="small-contain" v-show="!formType">
					<div class="s-title">你好，朋友!</div>
					<p class="s-content">右侧输入注册信息后，点击注册即可成为网站用户</p>
					<p class="s-content">成为网站用户，即可享受网站赋予的用户权限，欢迎您成为网站的一份子</p>
          <el-tooltip effect="light" content="如果您已经有用户，点击按钮，开始用户登录" placement="top">
            <button class="s-button" @click="changeFormTypeHandle(true)">登录</button>
          </el-tooltip>
          <el-tooltip effect="light" content="点击按钮，上一个页面" placement="bottom">
            <button class="s-button" @click="returnPrePageHandle">返回</button>
          </el-tooltip>
				</div>
			</div>
		</div>

  </div>
</template>

<script>
  import { encrypt } from "assets/js/encryptUtils";

  export default{
    layout: 'empty',
		name:'user-sign',
		data() {
      /**
       * 校验用户登录账号值
       * @param rule
       * @param {string} value      用户登录账号值
       * @param {function} callback 回调函数
       */
      let checkLoginID = (rule, value, callback) => {
        let loginMode = this.loginMode
        if ((loginMode === 0 || loginMode === 3) && value === '') {
          return callback(new Error("登录账号不能为空"))
        }
        // 通过验证
        callback()
      };
      /**
       * 校验用户登录密码
       * @param rule
       * @param {string} value      登录密码
       * @param {function} callback 回调函数
       */
      let checkLoginPassword = (rule, value, callback) => {
        let loginMode = this.loginMode
        if (loginMode === 0 || loginMode === 3) {
          if (value === '') {
            return callback(new Error("登录密码不能为空"))
          }
          let length = value.length
          if (length < 6 || length > 20) {
            return callback(new Error("登录密码长度在 6 到 20 个字符"))
          }
        }
        // 通过验证
        callback()
      };
      /**
       * 校验用户登录输入的图片验证码值
       * @param rule
       * @param {string} value      输入的图片验证码值
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkLoginCode = (rule, value, callback) => {
        let loginMode = this.loginMode
        if ((loginMode === 0 || loginMode === 3) && value === '') {
          return callback(new Error("验证码不能为空"))
        }
        // 通过验证
        callback()
      };
      /**
       * 校验快速登录账号值
       * @param rule
       * @param {string} value      快速登录账号值
       * @param {function} callback 回调函数
       */
      let checkFastId = (rule, value, callback) => {
        let loginMode = this.loginMode
        if (loginMode === 1 || loginMode === 2) {
          if (value === '') {
            return callback(new Error("手机号/邮箱号不能为空"))
          }
          if (!this.phoneRegex.test(value) && !this.emailRegex.test(value)) {
            return callback(new Error("请输入正确的手机号/邮箱号"))
          }
          // 重置用户信息表单信息验证
          this.$refs.loginForm.clearValidate(['fastCode']);
        }
        // 通过验证
        callback()
      };
      /**
       * 校验快速登录校验码
       * @param rule
       * @param {string} value      快速登录校验码值
       * @param {function} callback 回调函数
       */
      let checkFastCode = (rule, value, callback) => {
        let loginMode = this.loginMode
        if ((loginMode === 1 || loginMode === 2) && value === '') {
          return callback(new Error("验证码不能为空"))
        }
        // 通过验证
        callback()
      }
      /**
       * 校验用户新密码值
       * @param rule
       * @param value    新密码值
       * @param callback 回调函数
       */
      let checkNewPassword = (rule, value, callback) => {
        if (this.loginMode === 2) {
          if (value === '') {
            return callback(new Error("登录密码不能为空"))
          }
          let length = value.length
          if (length < 6 || length > 20) {
            return callback(new Error("登录密码长度在 6 到 20 个字符"))
          }
        }
        // 通过验证
        callback()
      };
      /**
       * 校验确认新密码值
       * @param rule
       * @param {string} value      确认新密码值
       * @param {function} callback 回调函数
       */
      let checkNewPasswordFunc = (rule, value, callback) => {
        if (this.loginMode === 2) {
          let newPassword = this.loginForm.newPassword
          if (newPassword === '') {
            return callback(new Error("新密码不能为空"))
          }
          if (value === '') {
            return callback(new Error("确认新密码不能为空"))
          }
          if (value !== newPassword) {
            return callback(new Error("新密码与确认密码不一致"))
          }
        }
        // 通过验证
        callback()
      }
      /**
       * 校验用户注册手机号值
       * @param rule
       * @param {string} value    手机号
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkPhone = (rule, value, callback) => {
        // 输入邮箱号后，登录手机号可以不用输入
        if (this.registerForm.email !== '' && this.emailRegex.test(this.registerForm.email)) {
          // 通过验证
          return callback()
        }
        if (value === '') {
          return callback(new Error("登录手机号或邮箱号必须填写一个"))
        }
        // 手机号正则判断
        if (!this.phoneRegex.test(value)) {
          return callback(new Error("请输入正确的手机号码"))
        }
        // 重置用户信息表单信息验证
        this.$refs['registerForm'].clearValidate(['phone', 'email']);
        // 通过验证
        callback()
      };
      /**
       * 校验用户注册手机号验证码值
       * @param rule
       * @param {string}   value    验证码
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkPhoneCode = (rule, value, callback) => {
        if (this.registerForm.phone !== '') {
          if (value === '') {
            return callback(new Error("短信验证码不能为空"))
          }
          if (value.length !== 6) {
            return callback(new Error("请输入6位短信验证码"))
          }
        }
        // 通过验证
        callback()
      };
      /**
       * 校验用户注册邮箱号值
       * @param rule
       * @param {string}   value    邮箱号
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkEmail = (rule, value, callback) => {
        // 输入邮箱号后，登录手机号可以不用输入
        if (this.registerForm.phone !== '' && this.phoneRegex.test(this.registerForm.phone)) {
          // 通过验证
          return callback()
        }
        if (value === '') {
          return callback(new Error("登录邮箱号或手机号必须填写一个"))
        }
        // 邮箱号正则判断
        if (!this.emailRegex.test(value)) {
          return callback(new Error("请输入正确的邮箱号码"))
        }
        // 重置用户信息表单信息验证
        this.$refs['registerForm'].clearValidate(['phone', 'email']);
        // 通过验证
        callback()
      };
      /**
       * 校验用户注册邮箱号验证码值
       * @param rule
       * @param {string}   value    验证码值
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkEmailCode = (rule, value, callback) => {
        if (this.registerForm.email !== '') {
          if (value === '') {
            return callback(new Error("邮件验证码不能为空"))
          }
          if (value.length !== 6) {
            return callback(new Error("请输入6位邮件验证码"))
          }
        }
        // 通过验证
        callback()
      };
      /**
       * 校验用户注册密码值
       * @param rule
       * @param {string}   value    密码值
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkPassword = (rule, value, callback) => {
        if (this.registerStep === 0) {
          // 通过验证
          callback()
        }
        if (value === '') {
          return callback(new Error("登录密码不能为空"))
        }
        let length = value.length
        if (length < 6 || length > 20) {
          return callback(new Error("登录密码长度在 6 到 20 个字符"))
        }
        // 通过验证
        callback()
      };
      /**
       * 校验用户注册密码的确认密码值
       * @param rule
       * @param {string}   value    确认密码值
       * @param {function} callback 回调函数
       * @returns {*}
       */
      let checkPasswordFunc = (rule, value, callback) => {
        if (this.registerStep === 0) {
          // 通过验证
          callback()
        }
        // 输入邮箱号后，登录手机号可以不用输入
        if (this.registerForm.password === '') {
          return callback(new Error("登录密码不能为空"))
        }
        if (value === '') {
          return callback(new Error("确认密码不能为空"))
        }
        if (value !== this.registerForm.password) {
          return callback(new Error("登录密码和确认密码不同，请确认"))
        }
        // 通过验证
        callback()
      };
			return {
        // 手机号正则表达式
        phoneRegex: /^((13[0-9])|(14[0-1,4-9])|(15[0-3,5-9])|(16[2,5-7])|(17[0-8])|(18[0-9])|(19[0-3,5-9]))\d{8}$/,
        // phoneRegex: /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/,
        // 邮箱号正则表达式
        emailRegex: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
        // 显示的表单类型[true-登录表单 false-注册表单]
				formType: true,
        /*
          登录相关属性
         */
        // 登录模式[0-账号登录 1-免密登录 2-忘记密码 3-账号申诉]
        loginMode: 1,
        // 登录标题
        loginTitle: '免密登录',
        // 登录按钮标题
        loginBtnTitle: '登录',
        // 发送短信/邮箱验证码按钮文字
        sendSecurityCodeBtnText: '获取验证码',
        // 发送短信/邮箱验证码按钮是否禁用[true-禁用 false-正常]
        sendSecurityCodeBtnDisable: false,
        // 用户登录表单对象
        loginForm: {
          // 登录账号（登录别名、手机号、邮箱号）
          loginID: '',
          // 用户登录密码
          password: '',
          // 用户输入验证码
          code: '',
          // 快速登录账号（手机号、邮箱号）
          fastId: '',
          // 快速登录验证码
          fastCode: '',
          // 用户新密码
          newPassword: '',
          // 用户新密码的确认密码
          checkNewPassword: ''
        },
        // 图片验证码对象
        imageCaptcha: {
          // 图片唯一标识
          id: undefined,
          // 图片字节数据
          imageData: undefined,
          // 图片验证码过期时间（时间戳）
          expireTime: 0,
        },
        /*
          注册相关属性
         */
        // 注册步骤[0-基础信息 1-用户密码]
        registerStep: 0,
        // 发送注册短信验证码按钮文字
        sendRegisterPhoneCodeBtnText: '获取短信验证码',
        // 发送短信验证码按钮是否禁用[true-禁用 false-正常]
        sendRegisterPhoneCodeBtnDisable: false,
        // 发送邮箱验证码按钮文字
        sendRegisterEmailCodeBtnText: '获取邮件验证码',
        // 发送邮箱验证码按钮是否禁用[true-禁用 false-正常]
        sendRegisterEmailCodeBtnDisable: false,
        // 用户注册表单对象
        registerForm: {
          // 用户名
          username: '',
          // 用户手机号
          phone: '',
          // 手机验证码
          phoneCode: '',
          // 用户邮箱号
          email: '',
          // 邮箱验证码
          emailCode: '',
          // 用户密码
          password: '',
          // 用户确认密码
          checkPassword: ''
        },
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
        // 登录表单验证规则
        loginRules: {
          loginID: [
            { required: true, validator: checkLoginID, trigger: 'blur' }
          ],
          password: [
            { required: true, validator: checkLoginPassword, trigger: 'blur' },
          ],
          code: [
            { required: true, validator: checkLoginCode, trigger: 'blur' },
          ],
          fastId: [
            { required: true, validator: checkFastId, trigger: 'blur' },
          ],
          fastCode: [
            { required: true, validator: checkFastCode, trigger: 'blur' },
          ],
          newPassword: [
            { required: true, validator: checkNewPassword, trigger: 'blur' },
          ],
          checkNewPassword: [
            { required: true, validator: checkNewPasswordFunc, trigger: 'blur' },
          ]
        },
        // 注册信息表单验证规则
        registerRules: {
          username: [
            { required: true, message: '用户名称不能为空', trigger: 'blur' },
          ],
          phone: [
            { required: true, validator: checkPhone, trigger: 'blur' },
          ],
          phoneCode: [
            { required: true, validator: checkPhoneCode, trigger: 'blur' },
          ],
          email: [
            { required: true, validator: checkEmail, trigger: 'blur' },
          ],
          emailCode: [
            { required: true, validator: checkEmailCode, trigger: 'blur' },
          ],
          password: [
            { required: true, validator: checkPassword, trigger: 'blur' },
          ],
          checkPassword: [
            { required: true, validator: checkPasswordFunc, trigger: 'blur' },
          ],
        }
			}
		},
    created() {
      if (process.client) {
        let params = this.$route.params
        if (params.optType) {
          this.formType = params.optType === '0'
        }
      }
    },
    methods: {
      /**
       * 切换显示的表单事件
       * @param {boolean} bool 表单类型[true-登录表单 false-注册表单]
       */
      changeFormTypeHandle(bool) {
        this.formType = bool

        if (bool) {
          // this.loginMode = 0
          // this.loginTitle = '用户登录'
          // this.loginBtnTitle = '登录'
          this.$refs.loginForm.resetFields()
        } else {
          this.$refs.registerForm.resetFields()
        }
      },
      /**
       * 切换登录模式事件
       * @param {number} loginMode 最新登录模式
       */
      changeLoginModeHandle(loginMode) {
        // 记录登录模式
        this.loginMode = loginMode
        // 登录表单清空
        this.$refs.loginForm.resetFields();
        switch (loginMode) {
          case 0:
            this.getCaptcha(false)
            this.loginTitle = '用户登录'
            this.loginBtnTitle = '登录'
            break
          case 1:
            this.loginTitle = '免密登录'
            this.loginBtnTitle = '登录'
            break
          case 2:
            this.loginTitle = '找回密码'
            this.loginBtnTitle = '提交'
            break
          case 3:
            this.getCaptcha(false)
            this.loginTitle = '申诉登录'
            this.loginBtnTitle = '申诉'
            break
          default:

        }
      },
      /**
       * 返回上一步注册步骤事件
       */
      preRegisterStepHandle() {
        this.registerStep = 0
      },
      /**
       * 获取登录验证码方法
       * @param {boolean} refresh 是否强制刷新验证码[true-刷新 false-不刷新]
       */
      getCaptcha(refresh) {
        let imageCaptcha = this.imageCaptcha
        if (refresh || Date.now() > imageCaptcha.expireTime) {
          this.$axios.$get('/index/captcha')
            .then(({ data }) => {
              imageCaptcha.id = data.id
              imageCaptcha.imageData = "data:image/gif;base64," + data.image
              imageCaptcha.expireTime = data.expireTime
            })
            .catch(() => {})
        }
      },
      /**
       * 发送手机/邮箱验证码事件（登录）
       */
      sendLoginSecurityCodeHandle() {
        // 发送手机/邮箱验证码按钮禁用
        this.sendSecurityCodeBtnDisable = true

        let fastId = this.loginForm.fastId
        if (!fastId) {
          this.notify('info', '温馨提示', '请输入手机号/邮箱号')
          // 发送手机/邮箱验证码按钮解除禁用
          this.sendSecurityCodeBtnDisable = false
          return
        }
        if (this.phoneRegex.test(fastId)) {
          // 手机号
          this.sendLoginPhoneCode(fastId)

        } else if (this.emailRegex.test(fastId)) {
          // 邮箱号
          this.sendLoginEmailCode(fastId)

        } else {
          this.notify('info', '温馨提示', '请输入正确的手机号/邮箱号')
          // 发送手机/邮箱验证码按钮解除禁用
          this.sendSecurityCodeBtnDisable = false
        }
      },
      /**
       * 发送短信验证码方法
       * @param {string} phone 手机号
       */
      sendLoginPhoneCode(phone) {
        this.$axios.$get('/index/sms/send', { params: { phone: phone, validateType: this.loginMode }})
          .then(() => {

            this.runLoginSecurityCodeTimer()

            this.notify('success', '发送成功', '短信验证码发送成功，请确认。')
          })
          .catch(() => {
            // 发送手机/邮箱验证码按钮解除禁用
            this.sendSecurityCodeBtnDisable = false
          })
      },
      /**
       * 发送邮件验证码方法
       * @param {string} email 邮箱号
       */
      sendLoginEmailCode(email) {
        this.$axios.$get('/index/mail/send', { params: { email: email, validateType: this.loginMode }})
          .then(() => {

            this.runLoginSecurityCodeTimer()

            this.notify('success', '发送成功', '邮箱验证码发送成功，请确认。')
          })
          .catch(() => {
            // 发送手机/邮箱验证码按钮解除禁用
            this.sendSecurityCodeBtnDisable = false
          })
      },
      /**
       * 用户登录事件
       */
      submitLoginHandle() {
        this.$refs.loginForm.validate((valid) => {
          if (!valid) {
            return false
          }
          // 按钮不可被点击
          this.buttonLoad = true

          let loginMode = this.loginMode
          switch (loginMode) {
            case 0:
              // 普通登录
              this.userLogin()
              break
            case 1:
              // 免密登录
              this.fastLogin()
              break
            case 2:
              // 忘记密码
              this.findPassword()
              break
            case 3:
              // 申诉登录
              this.appealLogin()
              break
            default:
              this.notify('info', '网站错误', '请联系管理员处理。')
          }
        });
      },
      /**
       * 用户普通登录方法
       */
      userLogin() {

        let loginVo = {
          // 用户登录名
          loginID: this.loginForm.loginID,
          // 登录类型[0-手机号 1-邮箱号 2-登陆别名]
          loginType: undefined,
          // 用户登录密码
          password: encrypt(this.loginForm.password),
          // 用户输入验证码
          code: this.loginForm.code,
          // 唯一uuid，用于验证码校验
          codeId: this.imageCaptcha.id,
        }

        if (this.phoneRegex.test(this.loginForm.loginID))  {
          loginVo.loginType = 0
        } else if (this.emailRegex.test(this.loginForm.loginID)) {
          loginVo.loginType = 1
        } else {
          loginVo.loginType = 2
        }

        this.$axios.$post('/index/login', loginVo)
          .then(({ loginSuccess:user } ) => {
            let hour = new Date().getHours()
            let title = hour >= 6 && hour < 12 ? '早上好' : hour >= 12 && hour < 18 ? '下午好' : '晚上好'

            this.notify('success', '登录成功', user.username + " " + title + "，欢迎登录系统")

            this.$store.commit('user/setUserId', user.userId)
            this.$store.commit('user/setUsername', user.username)
            if (user.avatar) {
              this.$store.commit('user/setAvatar', user.avatar)
            }
            this.$store.commit('user/setStatus', true)

            this.returnPrePageHandle()
          })
          .catch(() => {
            // 登录失败，重新获取验证码
            this.getCaptcha(true)
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 用户免密登录方法
       */
      fastLogin() {
        let loginFormVo = {
          // 用户登录账号
          loginID: this.loginForm.fastId,
          // 用户输入验证码
          code: this.loginForm.fastCode,
        }

        this.$axios.$post('/index/fast/login', loginFormVo)
          .then(({ loginSuccess:user } ) => {
            let hour = new Date().getHours()
            let title = hour >= 6 && hour < 12 ? '早上好' : hour >= 12 && hour < 18 ? '下午好' : '晚上好'

            this.notify('success', '登录成功', user.username + " " + title + "，欢迎登录系统")

            this.$store.commit('user/setUserId', user.userId)
            this.$store.commit('user/setUsername', user.username)
            if (user.avatar) {
              this.$store.commit('user/setAvatar', user.avatar)
            }
            this.$store.commit('user/setStatus', true)

            this.returnPrePageHandle()
          })
          .catch(() => {
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 用户找回密码方法
       */
      findPassword() {
        let loginFormVo = {
          // 用户登录账号
          loginID: this.loginForm.fastId,
          // 用户新密码
          password: encrypt(this.loginForm.newPassword),
          // 用户输入的验证码
          code: this.loginForm.fastCode,
        }
        this.$axios.$post('/index/find/password', loginFormVo)
          .then(() => {

            this.notify('success', '操作成功', '您的密码找回成功，请确认')

            this.loginMode = 1
            this.loginTitle = '免密登录'
            this.loginBtnTitle = '登录'

          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 用户申诉登录方法
       */
      appealLogin() {
        let loginFormVo = {
          // 用户登录名
          loginID: this.loginForm.loginID,
          // 登录类型[0-手机号 1-邮箱号 2-登陆别名]
          loginType: undefined,
          // 用户登录密码
          password: encrypt(this.loginForm.password),
          // 用户输入验证码
          code: this.loginForm.code,
          // 唯一uuid，用于验证码校验
          codeId: this.imageCaptcha.id,
        }

        if (this.phoneRegex.test(this.loginForm.loginID))  {
          loginFormVo.loginType = 0
        } else if (this.emailRegex.test(this.loginForm.loginID)) {
          loginFormVo.loginType = 1
        } else {
          loginFormVo.loginType = 2
        }

        this.$axios.$post('/index/appeal/login', loginFormVo)
          .then(({ data } ) => {
            // 直接跳转到用户申诉页面
            this.$router.push({ name: 'appeal', params: { mode: "0", data: data } })
          })
          .catch(() => {
            // 登录失败，重新获取验证码
            this.getCaptcha(true)
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 用户注册表单提交事件
       */
      submitRegisterHandle() {
        this.$refs['registerForm'].validate((valid, obj) => {
          if (!valid) {
            return false
          }
          let registerStep = this.registerStep
          if (registerStep === 0) {
            this.registerStep = 1
          } else {
            // 用户注册
            this.registerHandle()
          }
        })
      },
      /**
       * 发送注册短信验证码方法
       */
      sendRegisterPhoneCodeHandle() {
        // 发送注册短信验证码按钮禁用
        this.sendRegisterPhoneCodeBtnDisable = true

        let phone = this.registerForm.phone
        if (!phone) {
          this.notify('info', '温馨提示', '请输入注册手机号')
          // 发送注册短信验证码按钮解除禁用
          this.sendRegisterPhoneCodeBtnDisable = false
          return
        }
        if (!this.phoneRegex.test(phone)) {
          this.notify('info', '温馨提示', '请输入正确的注册手机号')
          // 发送注册短信验证码按钮解除禁用
          this.sendRegisterPhoneCodeBtnDisable = false
          return;
        }
        this.$axios.$get('/index/sms/send', { params: { phone: phone, validateType: 3 }})
          .then(() => {

            this.runRegisterPhoneCodeTimer()

            this.notify('success', '发送成功', '注册短信验证码发送成功，请确认。')
          })
          .catch(() => {
            // 发送注册短信验证码按钮解除禁用
            this.sendRegisterPhoneCodeBtnDisable = false
          })
      },
      /**
       * 发送注册邮件验证码方法
       */
      sendRegisterEmailCodeHandle() {
        // 发送注册邮件验证码按钮禁用
        this.sendRegisterEmailCodeBtnDisable = true

        let email = this.registerForm.email
        if (!email) {
          this.notify('info', '温馨提示', '请输入注册邮箱号')
          // 发送注册邮件验证码按钮解除禁用
          this.sendRegisterEmailCodeBtnDisable = false
          return
        }
        if (!this.phoneRegex.test(email)) {
          this.notify('info', '温馨提示', '请输入正确的注册邮箱号')
          // 发送注册邮件验证码按钮解除禁用
          this.sendRegisterEmailCodeBtnDisable = false
          return;
        }
        this.$axios.$get('/index/mail/send', { params: { email: email, validateType: 3 }})
          .then(() => {

            this.runRegisterEmailCodeTimer()

            this.notify('success', '发送成功', '注册邮件验证码发送成功，请确认。')
          })
          .catch(() => {
            // 发送注册邮件验证码按钮解除禁用
            this.sendRegisterEmailCodeBtnDisable = false
          })
      },
      /**
       * 注册用户事件
       */
      registerHandle() {
        // 按钮不可被点击
        this.buttonLoad = true

        let registerForm = this.registerForm
        let registerFormVo = {
          username: registerForm.username,
          phone: registerForm.phone,
          phoneCode: registerForm.phoneCode,
          email: registerForm.email,
          emailCode: registerForm.emailCode,
          password: encrypt(registerForm.password)
        }
        this.$axios.$post('/index/user/register', registerFormVo)
          .then(({ loginSuccess:user }) => {
            debugger
            let hour = new Date().getHours()
            let title = hour >= 6 && hour < 12 ? '早上好' : hour >= 12 && hour < 18 ? '下午好' : '晚上好'

            this.notify('success',  '注册成功', user.username + " " + title + "，欢迎登录系统")

            this.$store.commit('user/setUserId', user.userId)
            this.$store.commit('user/setUsername', user.username)
            if (user.avatar) {
              this.$store.commit('user/setAvatar', user.avatar)
            }
            this.$store.commit('user/setStatus', true)

            this.returnPrePageHandle()
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 返回上一个页面事件
       */
      returnPrePageHandle() {
        let prePage = this.$route.params.prePage
        if (prePage) {
          this.$route.params.prePage = undefined
        }
        if (!prePage || prePage === 'appeal') {
          prePage = 'index'
        }
        // console.log("路径: ", prePage)
        // 路由跳转到首页面
        this.$router.push({ name: prePage, params: this.$route.params})
      },
      /**
       * 执行获取登录验证码定时器
       */
      runLoginSecurityCodeTimer() {
        let num = 60
        this.sendSecurityCodeBtnText = num + "秒后可重试"
        let timer = setInterval(() => {
          num -= 1
          if (num === 0) {
            this.sendSecurityCodeBtnText = "获取验证码"
            // 发送手机/邮箱验证码按钮解除禁用
            this.sendSecurityCodeBtnDisable = false
            clearInterval(timer)
            return
          }
          this.sendSecurityCodeBtnText = num + "秒后可重试"
        }, 1000)
      },
      /**
       * 执行获取注册短信验证码定时器
       */
      runRegisterPhoneCodeTimer() {
        let num = 60
        this.sendRegisterPhoneCodeBtnText = num + "秒后可重试"
        let timer = setInterval(() => {
          num -= 1
          if (num === 0) {
            this.sendRegisterPhoneCodeBtnText = "获取短信验证码"
            // 发送短信验证码按钮解除禁用
            this.sendRegisterPhoneCodeBtnDisable = false
            clearInterval(timer)
            return
          }
          this.sendRegisterPhoneCodeBtnText = num + "秒后可重试"
        }, 1000)
      },
      /**
       * 执行获取注册邮件验证码定时器
       */
      runRegisterEmailCodeTimer() {
        let num = 60
        this.sendRegisterEmailCodeBtnText = num + "秒后可重试"
        let timer = setInterval(() => {
          num -= 1
          if (num === 0) {
            this.sendRegisterEmailCodeBtnText = "获取邮件验证码"
            // 发送邮件验证码按钮解除禁用
            this.sendRegisterEmailCodeBtnDisable = false
            clearInterval(timer)
            return
          }
          this.sendRegisterEmailCodeBtnText = num + "秒后可重试"
        }, 1000)
      },
		}
	}
</script>

<style scoped>
	.sign-page {
		width: 100vw;
		height: 100vh;
		/*box-sizing: border-box;*/
    background-image: linear-gradient(to right, #17B3A3, #43C49D, #6DD492, #99E385, #C7EF79);
	}
  .sign-page .contain {
		width: 50em;
		height: 28em;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		border-radius: 10px;
	}
  .sign-page .contain .sign-form {
		width: 70%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30%;
		transform: translateX(0%);
		transition: all 0.8s;
	}
  .sign-page .contain .sign-form.active {
    left: 0;
    transition: all 0.8s;
  }
  .sign-page .contain .sign-form .form-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
  .sign-page .contain .sign-form .form-contain .login-title,
  .sign-page .contain .sign-form .form-contain .register-title {
		font-size: 1.5em;
		font-weight: bold;
		color: rgb(57,167,176);
    margin-bottom: 20px;
	}
  .sign-page .contain .sign-form .form-contain .login-form,
  .sign-page .contain .sign-form .form-contain .register-form {
    width: 300px;
  }
  .sign-page .contain .sign-form .form-contain .login-form .captcha {
    width: 125px;
    height: 36px;
  }
  .sign-page .contain .sign-form .form-contain .login-button {
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		background-color: rgb(57,167,176);
		color: #fff;
		font-size: 1em;
		cursor: pointer;
	}
  .sign-page .contain .sign-form .form-contain .login-tool {
    margin-top: 15px; font-size: 15px;
  }
  .sign-page .contain .sign-form .form-contain .login-tool span {
    margin-right: 5px;
    cursor: pointer;
  }
  .sign-page .contain .sign-form .form-contain .login-tool span:hover {
    color: rgb(57,167,176);
  }
  .sign-page .contain .sign-form .form-contain .register-button {
    width: 17%;
    height: 35px;
    border-radius: 24px;
    border: none;
    outline: none;
    background-color: rgb(57,167,176);
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
  }
  .sign-page .contain .sign-form .form-contain .btn-group {
    width: 100%;
    text-align: center;
  }
  .sign-page .contain .sign-form .form-contain .btn-group .pre-button {
    width: 14%;
    height: 35px;
    border-radius: 24px;
    border: none;
    outline: none;
    background-color: rgb(56,183,145);
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
  }
  .sign-page .contain .sign-form .form-contain .btn-group .next-btn {
    margin-left: 20px;
  }
  .sign-page .contain .small-box {
		width: 30%;
		height: 100%;
		background: linear-gradient(135deg, rgb(57,167,176), rgb(56,183,145));
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(0%);
		transition: all 0.8s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}
  .sign-page .contain .small-box.active{
    left: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    transform: translateX(-100%);
    transition: all 0.8s;
  }
  .sign-page .contain .small-box .small-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
  .sign-page .contain .small-box .small-contain .s-title {
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
	}
  .sign-page .contain .small-box .small-contain .s-content {
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 0.5em 2em;
		line-height: 1.7em;
	}
  .sign-page .contain .small-box .small-contain .s-button {
		width: 50%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: transparent;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
    margin-top: 0.8em;
	}
</style>
